<template>
    <l-layout class="l-tab-page" v-if="!lr_loadPage" :left="240" >
        <template #left>
            <l-panel :title="$t('公司信息')" style="padding-right:0;" >
                <el-tree class="learun-tree" v-loading="treeLoading" :data="lr_companyTree" default-expand-all :expand-on-click-node="false"  @node-click="handleNodeClick">
                    <span class="lr-tree-node"  slot-scope="{node}">
                        <i class="learun-icon-co"></i>
                        {{ $t(node.label) }}
                    </span>
                </el-tree>
            </l-panel>
        </template>
        <l-panel style="padding-left:0;" >
            <template #toolLeft >
                <div class="l-panel--item" >
                    <l-tree-select
                        v-model="departmentId"
                        :placeholder="$t('please select部门')"
                        :options="lr_departmentTree(lr_departments[companyId])"
                        size="mini"

                        @change="handleChangeDept"
                        >
                    </l-tree-select>
                </div>
                <div class="l-panel--item" >
                    <el-input :placeholder="$t('please enter姓名/账号/电话')"  @keyup.enter.native="hanleSearch" v-model="searchWord" size="mini" >
                        <el-button @click="hanleSearch" slot="append" icon="el-icon-search"></el-button>
                    </el-input>
                </div>
            </template>
            <template #toolRight >
                <l-tool-btns :hasAdd="false" >
                    <l-excel-btns></l-excel-btns>
                    <el-button type="primary" size="mini" @click="handleSync()" icon="el-icon-refresh">{{ $t('同步至钉钉') }}</el-button>
                    <el-button type="primary" size="mini" @click="handleSyncSystem()" icon="el-icon-refresh">{{ $t('同步至系统') }}</el-button>
                </l-tool-btns>
            </template>
            <l-table 
                :columns="lr_getPageColumns(columns)" 
                :dataSource="tableData" 
                :loading="tableLoading"
                row-key="f_UserId"
                :isPage="true"
                :pageTotal="tableTotal"
                :tablePage.sync="tableCurrentPage"
                @loadPageData="turnTablePage"
                >
                <template v-slot:f_Gender="scope" >
                    <el-tag v-if="scope.row.f_Gender == 1" size="mini" type="success">{{ $t('男') }}</el-tag>
                    <el-tag v-else size="mini" type="danger">{{ $t('女') }}</el-tag>
                </template>
                <template v-slot:f_CompanyId="scope" >
                    {{(lr_companyList.find(t=>t.f_CompanyId == scope.row.f_CompanyId) || {}).f_FullName || ''}}
                </template>
                <template v-slot:f_DepartmentId="scope" >
                    {{lr_departmentName(lr_departments[scope.row.f_CompanyId] || [],scope.row.f_DepartmentId)}}
                </template>
                <template v-slot:isSyn="scope" >
                    <el-tag v-if="scope.row.isSyn == 1" size="mini" type="success">{{ $t('已同步') }}</el-tag>
                    <el-tag v-else size="mini" type="danger">{{ $t('未同步') }}</el-tag>
                </template>
            </l-table>
        </l-panel>
    </l-layout>
</template>

<script>
const api = window.$api.ding.user
export default {
    data () {
         return {
            lr_isPage:true,

            treeLoading:false,

            //query
            searchWord:'',
            searchTableData:null,

            tableLoading:false,
            columns: [
                {label:'姓名',prop:'f_RealName',minWidth:'110'},
                {label:'账号',prop:'f_Account',minWidth:'110'},
                {label:'手机',prop:'f_Mobile',minWidth:'108'},
                {label:'钉钉用户Id',prop:'f_DingUserId',minWidth:'108'},
                {label:'公司',prop:'f_CompanyId',minWidth:'120'},
                {label:'部门',prop:'f_DepartmentId',minWidth:'88'},
                {label:'性别',prop:'f_Gender',minWidth:'56',align:'center'},
                // {label:'同步状态',prop:'isSyn',width:'100',align:'center'},
            ],
            tableData:[],
            tableTotal:0,
            tablePageSize:50,
            tableCurrentPage:1,
            companyId:'',
            departmentId:'',
            departmentLoading:false
        }
    },
    computed:{
    },
    mounted () {
        this.init()
    },
    methods:{
        async init(){
            this.loadTableData()
            this.treeLoading = true
            await this.lr_loadCompanys()
            this.treeLoading = false
        },
        loadTableData(isNotFirst){
            if(!isNotFirst){
                this.tableCurrentPage = 1;
            }
            this.tableLoading = true;
            let queryData = {
                rows:this.tablePageSize,
                page:this.tableCurrentPage,
                sidx:'F_CreateDate DESC',
                keyword:this.searchWord,
                companyId:this.companyId,
                departmentId:this.departmentId,
                code:'xxx'
            }
            api.getPage(queryData).then(res=>{
                const data = this.$deepClone(res.data.data)
                data.rows.forEach(item => {
                    this.lr_loadDepartments(item.f_CompanyId)
                })
                this.tableData = data.rows
                this.tableTotal = data.records
                this.tableLoading = false
            }).catch(()=>{
                this.tableData = []
                this.tableLoading = false
            })
        },
        turnTablePage({rows}){
            this.tablePageSize = rows
            this.loadTableData(true)
        },
        handleNodeClick(data) {
            this.companyId = data.value
            this.departmentId = ''
            this.lr_loadDepartments(this.companyId)
            this.loadTableData()
        },
        handleChangeDept(){
            this.loadTableData()
        },
        hanleSearch(){
            this.loadTableData()
        },
        //同步至钉钉
        async handleSync(){
            if(!this.departmentId){
                this.$message({
                    type: 'warning',
                    message: this.$t('please select部门!')
                })
                return;
            }else{
                this.loading = true
                let queryData = {
                    rows:this.tablePageSize,
                    page:this.tableCurrentPage,
                    sidx:'F_CreateDate DESC',
                    keyword:this.searchWord,
                    companyId:this.companyId,
                    departmentId:this.departmentId,
                    code:'xxx'
                }
                const res = await this.$awaitWraper(api.syncData(queryData))
                if(res){
                    this.$message({
                        type: 'success',
                        message: this.$t('同步成功!')
                    })
                }
                this.loadTableData()
                this.loading = false
            }
        },
        //同步至系统
        async handleSyncSystem(){
            if(!this.departmentId){
                this.$message({
                    type: 'warning',
                    message: this.$t('please select部门!')
                })
                return;
            }else{
                this.loading = true
                let queryData = {
                    rows:this.tablePageSize,
                    page:this.tableCurrentPage,
                    sidx:'F_CreateDate DESC',
                    keyword:this.searchWord,
                    companyId:this.companyId,
                    departmentId:this.departmentId,
                    code:'xxx'
                }
                const res = await this.$awaitWraper(api.syncDataSystem(queryData))
                if(res){
                    this.$message({
                        type: 'success',
                        message: this.$t('同步成功!')
                    })
                }
                this.loadTableData()
                this.loading = false
            }
        }
    }

}
</script>
